<template>
  <div>
      <Nav></Nav>
      <div class="header-top"></div>
      <div id="loading-wrap" v-loading="loading">
        <div class="header-left" id="header-left">
          <div class="header-video" id="header-video">
            <video-player :playsinline="true" :options="playerOptions" class="video-player vjs-custom-skin" ref="videoPlayer" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)"></video-player>
          </div>
        </div>
        <div class="header-right" id="header-right">
            <div class="head-pic">
                <div class="head-text">
                    <p class="head-line">{{headline}}</p>
                    <p class="head-aut">{{author}}</p>
                </div>
                <div class="head-url">
                    <img :src="imgUrl" alt="">
                </div>
            </div>
            <div class="video-list">
                <p class="video-tit">目录</p>
                <ul class="video-ul">
                    <li class="video-li" :abc="ite.id" v-for="(ite , index) in catalogDetails" :key="index">
                        <router-link tag='a' :to="{path:'/video',name:'video',query:{id:ite.id,url:ite.url}}" class="J-media-item" @click.native="flushCom"><i v-if="ite.status==0" class="el-ali-yuanquan start"></i><i v-else-if="ite.status==1" class="el-ali-chart12 ing"></i><i v-else="ite.status==2" class="el-ali-xuanzhong end"></i><i class="el-ali-shipin type"></i>{{ite.name}} ({{ite.play_time}})</router-link>
                    </li>
                </ul>
            </div>
        </div>
      </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Nav from '../component/nav.vue'
  import VideoPlayer from 'vue-video-player'
  require('video.js/dist/video-js.css');
  require('vue-video-player/src/custom-theme.css');
  Vue.use(VideoPlayer);
  export default {
    components:{
      Nav
    },
    data() {
      return {
          playerOptions : {
              playbackRates: [1.0, 1.5, 2.0 ,2.5 ,3], //播放速度
              autoplay: true, //如果true,浏览器准备好时开始回放。
              muted: false, // 默认情况下将会消除任何音频。
              loop: false, // 导致视频一结束就重新开始。
              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language: 'zh-CN',
              aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              sources: [{
                  type: "",
                  src: "https://cdn.yiyiyiyi.info/video/yiyiyiyi_teaching/"+this.$route.query.url, //url地址
              }],
              poster: "", //你的封面地址
              // width: document.documentElement.clientWidth,
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                  timeDivider: true,
                  durationDisplay: true,
                  remainingTimeDisplay: false,
                  fullscreenToggle: true  //全屏按钮
              }
          },
          imgUrl:"",
          headline:"",
          author:"",
          catalogDetails:[], //目录
          loading: true
      }
    },
    mounted(){
      this.menu();
      this.getJu();
    },
    methods: {
      /*跳转页面顶部*/
      menu() {
        window.scrollTo(0,0);
        //var W=document.body.clientWidth;
        //console.log(this.$route.query.url)
        var H=document.body.clientHeight ;
        document.getElementById("loading-wrap").style.height=(H-50)+'px';
        document.getElementById("header-left").style.height=(H-50)+'px';
        document.getElementById("header-left").style.background='#000';
        document.getElementById("header-right").style.height=(H-50)+'px';
        document.getElementById("header-right").style.background='#fff';
      },
      /*获取数据*/
      getJu(){
        let self = this;
        this.$axios({
          url: this.$url.videoPlay,
          method:'post',
          data:{
            id:this.$route.query.id,
          },
        }).then(response=> {
          if (response.data.result) {
              /*信息*/
              this.imgUrl=response.data.content.data.img_url;
              this.headline=response.data.content.data.name;
              this.author='讲师：'+response.data.content.data.teacher;
              /*视频*/
              this.catalogDetails = [];
              this.catalogDetails=response.data.content.video;
              this.loading=false;
          }else{
              self.$notify.error({
                title: '错误',
                message: response.data.result.errorMsg
              });
          }
        }).catch(error=>{
          console.log(error);
        })
      },
      /*点击跳转当前页面*/
      flushCom(){
        let self = this;
        this.getJu();
        setTimeout(function () {
          self.$router.go(0);
        },100)
      },
      /*开始播放*/
      onPlayerPlay(player) {
        //console.log("play");
      },
      /*播放完成*/
      onPlayerPause(player){
        //console.log("pause");
        //console.log(this.$refs.videoPlayer.player)
      },
      /*播放完成*/
      onPlayerEnded(player) {
        let self = this;
        this.$axios({
          url: this.$url.videoPlayOver,
          method:'post',
          data:{
            video_id:this.$route.query.id,
          },
        }).then(response=> {
          if (response.data.result) {
            console.log(response.data)
          }else{
            self.$notify.error({
              title: '错误',
              message: response.data.result.errorMsg
            });
          }
        }).catch(error=>{
          console.log(error);
        })
      },
    }
  }
</script>
<style scoped>
  #loading-wrap{
    width:100%;
  }
  .header-top{
    width:100%;
    height:50px;
    background:#33383b;
  }
  .header-left{
    width:70%;
    height:100%;
    float:left;
  }
  .header-video{
    width:96%;
    height:40%;
    padding:10.5% 2% 4%;
    float:left;
  }
  /*video播放按钮样式*/
  .video-js .vjs-big-play-button{
    height: 2em !important;
    width: 2em !important;
    line-height: 2em !important;
    border-radius: 50%;
  }
  .header-right{
    width:30%;
    height:auto;
    float:right;
  }
  .head-pic{
    width:100%;
    height:13%;
    background:#acadb1;
    overflow:hidden;
  }
  .head-text{
    width:62%;
    height:70%;
    padding:3% 0 3% 3%;
    float:left;

  }
  .head-line{
    font-size:15px;
    height:45px;
    line-height:45px;
    margin:0;
    color:#383838;
  }
  .head-aut{
    font-size:12px;
    height:45px;
    margin:0;
    color:#383838;
  }
  .head-url{
    width:32%;
    height:70%;
    padding:3% 3% 3% 0;
    float:right;
  }
  .head-url img{
    width:100%;
    height:100%;
  }

  .video-list{
    width:100%;
    height:auto;
  }
  .video-tit{
    width:100%;
    height:55px;
    line-height:55px;
    margin:0;
    text-align:center;
    font-size:17px;
    background:#d2d5da;
  }
  .video-ul{
    width:100%;
    height:auto;
    padding:0;
  }
  .video-li{
    width:94%;
    padding:0 3%;
    height:40px;
    line-height:40px;
    position: relative;
    list-style:none;
    cursor:pointer;
  }
  .video-li:hover{
    background: rgba(242,13,13,.05);
  }
  .video-li .J-media-item{
    color: #1c1f21;
    display: block;
    overflow: hidden;
    word-break: break-all;
    text-decoration:none;
  }
  .video-li .J-media-item .start{
    position: absolute;
    right: 26px;
    top: 50%;
    margin-top: -19px;
    font-size: 22px;
    color: #383838;

  }
  .video-li .J-media-item .ing,.video-li .J-media-item .end{
    position: absolute;
    right: 26px;
    top: 50%;
    margin-top: -19px;
    font-size: 22px;
    color: #00b43c;
  }
  .video-li .J-media-item .type{
    font-size: 24px;
    color: #383838;
    line-height: 24px;
    position: relative;
    top: 3px;
    margin-right: 4px;
  }
</style>

